<template>
	<view class="mainBg h100 ">
		<view class="container">
			<view class="logo">
				<image src="@/static/logo.svg" mode=""></image>
				<view class="">
					妙有芯世界
				</view>
			</view>
			<view class="form">
				<view class="col">
					<image src="@/static/login/form-icon1.png" mode=""></image>
					<input v-model="phone" type="tel" placeholder="请输入手机号" />
				</view>
				<view class="col">
					<image src="@/static/login/form-icon2.png" mode=""></image>
					<input type="number" v-model="code" placeholder="请输入验证码" />
					<sendCode :phone="phone" :event="event" />
				</view>
			</view>
			<view class="loginBtn">
				<text>
					<navigator url="/pages/login/login"> 返回登录</navigator>
				</text>
			</view>
			<view class="submit" @click="regSubmit">
				注册名号
			</view>
		</view>
		<popup :show.sync="show" type="bottom">
			<view class="term">
				<view class="col" v-for="agree,index in agreeList" :key="agree.id">
					<navigator :url="agree.url">
						{{agree.id}}.{{agree.title}}
						<text class="signY" v-if="agree.sign == `Y`">[已签]</text>
						<text class="signN" v-if="agree.sign == `N`">[待签]</text>
					</navigator>
				</view>
				<view class="btns">
					<view class="btn agree" @click="agree">
						同意
					</view>
					<view class="btn refuse" @click="show=false">
						拒绝
					</view>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
	import sendCode from '@/components/sendCode.vue'
	import popup from '@/components/popup.vue'
	export default {
		components: {
			sendCode,
			popup
		},
		data() {
			return {
				show: false,
				phone: '',
				code:'',
				event: 'register',
				regCheck:false,	//可注册检测
				agreeList:[
					{id:1,title:'妙有芯世界之会员等级',type:'user_level'},
					{id:2,title:'妙有芯世界之用户协议',type:'user_service'},
					{id:3,title:'妙有芯世界之隐私政策',type:'user_privacy'},
				]
			}
		},
		onShow() {
			this.agreeList.forEach(item=>{
				item.url = '/pages/user/vip/level?type='+item.type
				if(localStorage.getItem("sign-"+item.type))
				{
					item.sign = 'Y'
				}else{
					item.sign = 'N'
				}
				// console.log(item)
				
			})
		},
		methods: {
			regSubmit(){
				if(!this.phone)
				{
					this.$toast("请输入手机号")
					return false
				}
				const reg = /^1[3-9]\d{9}$/;
				if (!reg.test(this.phone)) {
				this.$toast('手机号格式错误')
				return
				}
			    if(!this.code)
			    {
				 this.$toast("请输入验证码")
				 return false
			    }
				
				this.$post("/user/registerCheck",{
					phone: this.phone,
					code: this.code
				}).then(res => {
					// console.log(res)
					if(res.code == 200)
					{
						this.regCheck = true
						this.show = true
					}else{
						//仅用于测试，
						this.regCheck = true
						this.show = true
						
						this.$toast(res.msg)
						return false
					}
					
				})
				
			},
			agree() {
				if(!this.regCheck)
				{
					this.$toast("安全检测失败")
					return false
				}
				let signCheck = true
				//检测是否完成签名
				this.agreeList.forEach(item=>{
		
					if(!localStorage.getItem("sign-"+item.type))
					{
						signCheck = false
					}
					
				})
				if(!signCheck)
				{
					this.$toast("请完成所有协议签名")
					return false
				}
				
				
				
				uni.redirectTo({
					url: "./register?phone=" + this.phone
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #35CBAD;
	}

	.logo {
		text-align: center;
		color: #fff;
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 180rpx;

		image {
			width: 104rpx;
			height: 104rpx;
		}
	}

	.form {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 40rpx;
		margin-top: 50rpx;

		.col {
			display: flex;
			align-items: center;
			padding: 40rpx 0;
			border-bottom: 1px solid #eee;
			position: relative;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			input {
				font-size: 28rpx;
				padding: 0 20rpx;
			}
		}
	}

	.term {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 60rpx 60rpx 150rpx;

		.col {
			font-size: 40rpx;
			color: #4095e5;
			line-height: 1.7;
			.signY{
				color: #35CBAD;
			}
			.signN{
				color: #ff0000;
			}
		}

		.btns {
			display: flex;
			justify-content: space-between;
			margin-top: 100rpx;

			.btn {
				border-radius: 8rpx;
				line-height: 60rpx;
				width: 160rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
			}

			.agree {
				background-color: #51C76C;
			}

			.refuse {
				background-color: rgba($color: #ff0000, $alpha: 0.25);
				color: #ff0000;
			}
		}
	}

	.submit {
		background: linear-gradient(180deg, #4095E5, #51C76C);
		text-align: center;
		border-radius: 100px;
		color: #fff;
		line-height: 82rpx;
		font-size: 32rpx;
		margin-top: 160rpx;
	}

	.loginBtn {
		text-align: right;
		margin-top: 16rpx;

		text {
			background-color: #4BB398;
			color: #fff;
			line-height: 60rpx;
			font-size: 32rpx;
			width: 160rpx;
			display: inline-block;
			text-align: center;
			border-radius: 16rpx;
		}
	}
</style>